function ChangePasswordPage() {
    const [loginId, setLoginId] = React.useState('');
    const [oldPassword, setOldPassword] = React.useState('');
    const [newPassword, setNewPassword] = React.useState('');
    const [confirmPassword, setConfirmPassword] = React.useState('');
    const [error, setError] = React.useState('');
    const [success, setSuccess] = React.useState('');
    const [loading, setLoading] = React.useState(false);

    const changePassword = async (e) => {
        e.preventDefault();
        setError('');
        setSuccess('');

        if (!loginId) {
            setError('请输入用户名或邮箱');
            return;
        }

        if (!oldPassword) {
            setError('请输入原密码');
            return;
        }

        if (!newPassword) {
            setError('请输入新密码');
            return;
        }

        if (newPassword !== confirmPassword) {
            setError('两次输入的新密码不一致');
            return;
        }

        if (newPassword.length < 6) {
            setError('新密码长度至少6位');
            return;
        }

        if (oldPassword === newPassword) {
            setError('新密码不能与原密码相同');
            return;
        }

        setLoading(true);

        try {
            // 调用修改密码API
            const response = await fetch(Utils.getApiUrl('/chm/api/auth/change-password'), {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                mode: 'cors',
                credentials: 'omit',
                body: JSON.stringify({
                    loginId: loginId,
                    oldPassword: oldPassword,
                    newPassword: newPassword
                })
            });

            const result = await response.json();

            if (result.status === 0) {
                setLoading(false);
                setSuccess('密码修改成功！正在跳转到登录页...');
                
                // 3秒后跳转到登录页
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 3000);
            } else {
                setLoading(false);
                setError(result.msg || '密码修改失败');
            }
        } catch (error) {
            setLoading(false);
            setError('网络错误，请检查网络连接');
            console.error('修改密码请求失败:', error);
        }
    };

    return React.createElement('div', { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
        React.createElement('div', { className: 'login-container' },
            React.createElement('div', { className: 'header' },
                React.createElement('h1', null, '修改密码'),
                React.createElement('p', null, '请输入您的账号信息修改密码')
            ),

            error && React.createElement('div', { className: 'mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2' }, error),
            success && React.createElement('div', { className: 'mb-4 text-sm text-green-600 bg-green-50 border border-green-200 rounded px-3 py-2' }, success),

            React.createElement('form', { onSubmit: changePassword },
                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'loginId' }, '用户名或邮箱'),
                    React.createElement('input', {
                        type: 'text',
                        id: 'loginId',
                        value: loginId,
                        onChange: (e) => setLoginId(e.target.value),
                        placeholder: '请输入用户名或邮箱'
                    })
                ),

                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'oldPassword' }, '原密码'),
                    React.createElement('input', {
                        type: 'password',
                        id: 'oldPassword',
                        value: oldPassword,
                        onChange: (e) => setOldPassword(e.target.value),
                        placeholder: '请输入原密码'
                    })
                ),

                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'newPassword' }, '新密码'),
                    React.createElement('input', {
                        type: 'password',
                        id: 'newPassword',
                        value: newPassword,
                        onChange: (e) => setNewPassword(e.target.value),
                        placeholder: '请输入新密码（至少6位）'
                    })
                ),

                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'confirmPassword' }, '确认新密码'),
                    React.createElement('input', {
                        type: 'password',
                        id: 'confirmPassword',
                        value: confirmPassword,
                        onChange: (e) => setConfirmPassword(e.target.value),
                        placeholder: '请再次输入新密码'
                    })
                ),

                React.createElement('button', {
                    type: 'submit',
                    disabled: loading,
                    className: `login-btn ${loading ? '' : ''}`
                }, loading ? '修改中...' : '修改密码'),

                React.createElement('div', { className: 'back-link' },
                    React.createElement('a', {
                        href: 'login.html',
                        className: ''
                    }, '返回登录')
                )
            )
        )
    );
}

ReactDOM.render(React.createElement(ChangePasswordPage), document.getElementById('root'));